<template>
  <el-dialog
    :title="title"
    class="gl_dialog_TitleLine gl_dl_footer addFee"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="530px"
  >
    <el-form ref="courseForm" class="gl_form_mini" :model="formdata" style="padding: 0 30px" :rules="formdata_Rules" label-width="80px">
      <div>
        <div>
          <el-form-item label="名称" prop="name">
            <el-input
              v-model="formdata.name"
              style="width:320PX"
              type="input"
              size="mini"
              placeholder="请输入名称"
              maxlength="10"
              show-word-limit
            />
          </el-form-item>
          <el-form-item label="费用" prop="free">
            <!-- <el-input
              v-model="formdata.amount"
              style="width:320PX"
              type="number"
              size="mini"
              placeholder="请输入费用"
              maxlength="10"
              show-word-limit
            /> -->
            <el-input-number
              v-model="formdata.amount"
              placeholder="请输入费用"
              style="width:320px; text-align:left"
              size="mini"
              :controls="false"
              :precision="2"
              :min="0"
              :max="21474836"
            />
          </el-form-item>
          <el-form-item label="状态" prop="isEnabled">
            <el-radio-group v-model="formdata.isEnabled">
              <el-radio :label="true" style="margin-right:60px">启用</el-radio>
              <el-radio :label="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="考试必须" prop="isExamRequired">
            <el-radio-group v-model="formdata.isExamRequired">
              <el-radio :label="true" style="margin-right:75px">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" :loading="submitLoading" size="mini" @click="submit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { api_POST_ClubFee, api_PUT_ClubFeeId } from '@/extend/api/hallswaggerApi/app.js';
import { CreateFeeInput } from '@/lib/form/hall/swaggerForm';
import validator from '@/lib/validate/index.js';
export default {
  data() {
    return {
      id: '',
      submitLoading: false,
      formdata: new CreateFeeInput(), // 表单数据
      CreateFeeInput: new CreateFeeInput(),
      typeRadios: 3,
      examRadios: 6,
      title: '',
      textarea: '',
      dialogVisible: false,
      formdata_Rules: { // 必填项，验证密码格式
        name: [
          validator.required('名称不能为空')
        ],
        isEnabled: [
          validator.required('请选择状态')
        ],
        isExamRequired: [
          validator.required('请选择考试是否必须')
        ]
      }
    };
  },
  watch: {
    dialogVisible: {
      handler() {
        if (this.dialogVisible === false) {
          this.formdata = new CreateFeeInput();
          this.id = '';
        }
      },
      deep: true
    }
  },
  methods: {
    submit() {
      this.$refs.courseForm.validate(
        valid => {
          if (valid) {
            if (this.id === '') {
              this.submitLoading = true;
              this.CreateFeeInput = JSON.parse(JSON.stringify(this.formdata));
              this.CreateFeeInput.amount = Math.round((this.CreateFeeInput.amount * 100) * 1000) / 1000;
              api_POST_ClubFee(this.CreateFeeInput).then(res => {
                this.submitLoading = false;
                this.$message({ type: 'success', message: '新增成功' });
                this.$parent.gettablelist();
                this.dialogVisible = false;
              }, error => {
                this.submitLoading = false;
                const _msg = error.error.message || error.message;
                this.$message({ type: 'error', message: _msg });
              });
            } else {
              this.CreateFeeInput = JSON.parse(JSON.stringify(this.formdata));
              this.CreateFeeInput.amount = Math.round((this.CreateFeeInput.amount * 100) * 1000) / 1000;
              console.log(this.CreateFeeInput.amount * 100 + '');
              this.submitLoading = true;
              api_PUT_ClubFeeId(this.id, this.CreateFeeInput).then(res => {
                this.submitLoading = false;
                this.$message({ type: 'success', message: '更新成功' });
                this.$parent.gettablelist();
                this.dialogVisible = false;
              }, error => {
                this.submitLoading = false;
                const _msg = error.error.message || error.message;
                this.$message({ type: 'error', message: _msg });
              });
            }
          }
        });
    }
  }
};
</script>

<style>
.addFee .el-input-number .el-input__inner {
  text-align: left;
}
</style>

<style scoped>
.up_button {
  display: flex;
height: 40px;
align-items: center;
}
.up_button>div {
  margin-right: 16px;
}
</style>
